<template>
  <div class="dashboard-container">
    <!-- 1. 标题和日期切换 (保持不变) -->
    <TitleIndex @sendTitleInd="getTitleNum" :flag="flag" :tateData="tateData" />

    <!-- 2. 图表容器 -->
    <!--
      - v-if="!loading" 控制整体的显示/隐藏。
      - v-else-if="loading" 用于显示加载状态。
      - :key="tateData.join('-')" 是一个优化技巧，当日期范围变化时，
        强制重新渲染整个图表区域，避免 ECharts 实例复用可能带来的 bug。
    -->
    <div v-if="!loading" class="charts-grid" :key="tateData.join('-')">
      <!-- 营业额统计 -->
      <TurnoverStatistics :turnoverdata="turnoverData" />
      <!-- 用户统计 -->
      <UserStatistics :userdata="userData" />
      <!-- 订单统计 -->
      <OrderStatistics :orderdata="orderData" />
      <!-- 销量排名 TOP10 -->
      <Top10 :top10data="top10Data" />
    </div>

    <!-- 加载状态的占位符 -->
    <div v-else class="charts-grid-placeholder">
      <div class="placeholder-item">数据加载中...</div>
      <div class="placeholder-item">数据加载中...</div>
      <div class="placeholder-item">数据加载中...</div>
      <div class="placeholder-item">数据加载中...</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';

// --- 1. 导入工具函数和 API ---
import {
get1stAndToday,
past7Day,
past30Day,
pastWeek,
pastMonth,
} from '@/utils/formValidate';
import {
getTurnoverStatistics,
getUserStatistics,
getOrderReportStatistics,
getTop10, // 使用新的 report.ts 中的函数名
} from '@/api/report';

// --- 2. 导入子组件 ---
import TitleIndex from './components/titleIndex.vue';
import TurnoverStatistics from './components/turnoverStatistics.vue';
import UserStatistics from './components/userStatistics.vue';
import OrderStatistics from './components/orderStatistics.vue';
import Top10 from './components/top10.vue'; // 保持组件名与文件名一致

// --- 3. 状态管理 (Refs) ---
const flag = ref(2); // 默认选中 '近7日' (index 1 + 1)
const tateData = ref<string[]>([]);
const turnoverData = ref({});
const userData = ref({});
const orderData = ref({});
const top10Data = ref({});
const loading = ref(true); // --- 新增一个 loading 状态 ---
// overviewData 在这个版本的逻辑中不需要，已移除

// --- 4. 方法 (Functions) ---

// 主初始化函数，获取所有数据
const init = async (begin: string, end: string) => {
  loading.value = true; // --- 在请求开始时，设置 loading 为 true ---
try {
// 使用 Promise.all 并行获取数据，提高性能
const [
turnoverRes,
userRes,
orderRes,
top10Res
] = await Promise.all([
getTurnoverStatistics({ begin, end }),
getUserStatistics({ begin, end }),
getOrderReportStatistics({ begin, end }),
getTop10({ begin, end }),
]);

// 填充营业额数据
if (turnoverRes.code === 1) {
turnoverData.value = {
dateList: turnoverRes.data.dateList.split(','),
turnoverList: turnoverRes.data.turnoverList.split(',')
};
}

// 填充用户数据
if (userRes.code === 1) {
userData.value = {
dateList: userRes.data.dateList.split(','),
totalUserList: userRes.data.totalUserList.split(','),
newUserList: userRes.data.newUserList.split(','),
};
}

// 填充订单数据
if (orderRes.code === 1) {
orderData.value = {
dateList: orderRes.data.dateList.split(','),
orderCountList: orderRes.data.orderCountList.split(','),
validOrderCountList: orderRes.data.validOrderCountList.split(','),
totalOrderCount: orderRes.data.totalOrderCount,
validOrderCount: orderRes.data.validOrderCount,
orderCompletionRate: orderRes.data.orderCompletionRate
};
}

// 填充 Top10 数据
if (top10Res.code === 1) {
top10Data.value = {
nameList: top10Res.data.nameList.split(',').reverse(),
numberList: top10Res.data.numberList.split(',').reverse(),
};
}

} catch (error) {
console.error("获取统计数据失败:", error);
}finally {
    loading.value = false; // --- 在所有请求结束后，设置 loading 为 false ---
  }
};

// 处理来自子组件的事件
const getTitleNum = (data: number) => {
flag.value = data;
switch (data) {
case 1: tateData.value = get1stAndToday(); break;
case 2: tateData.value = past7Day(); break;
case 3: tateData.value = past30Day(); break;
case 4: tateData.value = pastWeek(); break;
case 5: tateData.value = pastMonth(); break;
}
init(tateData.value[0], tateData.value[1]);
};

// --- 5. 生命周期 (核心修改) ---
onMounted(() => {
  // --- 直接调用 getTitleNum，移除 nextTick ---
  getTitleNum(3);
});

</script>
<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
}

// --- 核心修改：使用 CSS Grid 实现 2x2 布局 ---
.charts-grid, .charts-grid-placeholder {
  display: grid;
  // 定义两列，每列占据一份剩余空间 (等宽)
  grid-template-columns: repeat(2, 1fr);
  // 定义行和列之间的间距
  gap: 20px;
}

// 加载占位符的样式
.charts-grid-placeholder {
  .placeholder-item {
    background-color: #fff;
    border-radius: 4px;
    height: 420px; // 与图表卡片的高度保持一致
    display: flex;
    justify-content: center;
    align-items: center;
    color: #909399;
    font-size: 14px;
  }
}
</style>
